<template>
    <dzs-form :inline="true" v-model:value="formData" :options="formOptions" @onSearch="onSearch"
        @onReset="onSearch"></dzs-form>
    <dzs-header-button :rules="[]">
        <dzs-button type="primary" @click="openDialog">清空日志</dzs-button>
    </dzs-header-button>
    <dzs-table :list="tableData" :tableHeader="tableHeader" :maxSize="tableInfo.maxSize" :total="tableInfo.total"
        :tableOptions="tableInfo.tableOptions" :operationOption="tableInfo.operationOption" :border="tableInfo.border"
        :loading="tableInfo.loading" @onPageChange="onPageChange" :showOperation="false">
    </dzs-table>
    <dialog-form :isShow="isShow" @close="closeDialog" @onHoldSearch="onSearch"></dialog-form>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { TABALE_HEADER } from "./config";
import dialogForm from "./components/dialog-form.vue"
import type { TableHeader, dzsTableProps } from "@/components/dzs-table/@types"
import type { dzsFormProps } from "@/components/dzs-form/@types";
import { getLogList } from "./api/api";
import type { tableItem } from "./@types";
import type { CommonResponse } from "@/@types";

const tableHeader = ref<TableHeader[]>(TABALE_HEADER);
const tableData = ref<tableItem[]>([]);
const tableInfo = ref({
    total: 0,
    maxSize: 10,
    loading: false,
    border: true,
    tableOptions: {
        'row-key': "ID",
        'default-expand-all': true,
        'tree-props': {
            children: 'children',
            hasChildren: 'hasChildren'
        }
    },
    operationOption: {
        fixed: 'right',
        width: "240px"
    }
})

const pageInfo = ref({
    page: 1,
    pageSize: 10
})

const isShow = ref(false);
const formData = ref({
    requestUrl: '',
    ip: '',
    username: '',
    time: [],
    startTime: '',
    endTime: ''
})

const formOptions = computed<dzsFormProps["formOptions"]>(() => {
    return {
        formProps: {
            "label-width": "120px",
        },
        formItem: [
            {
                label: "请求地址",
                key: "requestUrl",
                type: "input",
            },
            {
                label: "请求ip",
                key: "ip",
                type: "input"
            },
            {
                label: "操作人",
                key: "username",
                type: "input"
            },
            {
                label: '请求时间',
                type: 'date',
                key: 'time',
                props: {
                    type: 'datetimerange',
                    'range-separator': '至',
                    'start-placeholder': '开始日期',
                    'end-placeholder': '结束日期',
                    format: 'YYYY-MM-DD HH:mm:ss',
                    'value-format': 'YYYY-MM-DD HH:mm:ss'
                },
                span: 8
            }
        ]
    }
})

onMounted(() => {
    onSearch();
})

const onSearch: dzsFormProps['onSearch'] = () => {
    tableInfo.value.loading = true;
    if(formData.value.time && formData.value.time.length > 0){
        formData.value.startTime = formData.value.time[0];
        formData.value.endTime = formData.value.time[1];
    }
    getLogList({
        ...formData.value,
        page: pageInfo.value.page,
        pageSize: pageInfo.value.pageSize
    }).then((res: any) => {
        tableInfo.value.loading = false;
        const result: CommonResponse<tableItem[]> = res;
        let data = result.data.data;
        tableData.value = data;
        tableInfo.value.total = result.data.count
    }).catch((err) => {
        tableInfo.value.loading = false;
    })
}

const onPageChange: dzsTableProps<tableItem>['onPageChange'] = (data) => {
    if (data.status == 'page') {
        pageInfo.value.page = data.data;
        onSearch();
    }
    if (data.status == 'size') {
        pageInfo.value.pageSize = data.data;
        onSearch();
    }
}
/**打开弹窗*/
const openDialog = () => {
    isShow.value = true;
}

const closeDialog = () => {
    isShow.value = false;
}
</script>